<template>
	<div>
		<main-content
			v-if="pageType === 'i'"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="queryForm"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.rebates_cycle')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="queryTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd"
							type="daterange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							align="right"
							:clearable="false"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
						prop="orderStatus"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.orderStatus"
							style="width: 220px"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-for="item in orderStatusArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="flex-row-container">
						<el-input
							v-model="queryData.inputValue"
							class="input-with-select"
							:placeholder="$t('common.please_enter')"
							clearable
							size="medium"
							@input="forceUpdate"
						>
							<el-select
								slot="prepend"
								v-model="queryData.inputType"
								width="110px"
								:placeholder="$t('common.please_choose')"
							>
								<el-option
									:label="$t('funds.proxy_name')"
									:value="1"
								></el-option>

								<el-option
									:label="
										$t('funds.fund_audit.top_proxy_name')
									"
									:value="2"
								></el-option>
								<el-option
									:label="$t('funds.order_no')"
									:value="3"
								></el-option>
							</el-select>
						</el-input>
					</el-form-item>
					<!-- <el-form-item :label="`${$t('funds.order_no')}:`" prop="orderNo">
						<el-input
							v-model="queryData.orderNo"
							clearable
							size="medium"
							style="width: 260px"
							:placeholder="$t('common.please_enter')"
							@blur="cleanBlankSpace('queryData', 'orderNo')"
						></el-input>
					</el-form-item>
					<el-form-item label="总代理账号:">
						<el-input
							v-model="queryData.topProxyName"
							clearable
							size="medium"
							style="width: 300px"
							:placeholder="$t('common.please_enter')"
							@blur="cleanBlankSpace('queryData', 'topProxyName')"
						></el-input>
					</el-form-item>
					<el-form-item :label="$t('funds.proxy_name')">
						<el-input
							v-model="queryData.proxyName"
							clearable
							size="medium"
							style="width: 220px"
							:placeholder="$t('common.please_enter')"
							@blur="cleanBlankSpace('queryData', 'proxyName')"
						></el-input>
					</el-form-item> -->
					<el-form-item
						:label="
							`${$t(
								'funds.proxy_member_funds_record.person_rebate_amount'
							)}:`
						"
						prop="lockAccount"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.rebateAmountMin"
							size="normal"
							clearable
							style="width: 130px"
							:placeholder="$t('common.minimum')"
							maxLength="15"
							v-input="{ name: 'onlyTwoNum' }"
							name="rebateAmountMin"
							@blur="
								handleAmount(
									queryData,
									1,
									'rebateAmountMin',
									'rebateAmountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_rebateCheck1'
									)
								)
							"
						></el-input>
						-
						<el-input
							v-model="queryData.rebateAmountMax"
							size="normal"
							clearable
							style="width: 130px"
							:placeholder="$t('common.maximum')"
							maxLength="15"
							v-input="{ name: 'onlyTwoNum' }"
							name="rebateAmountMax"
							@blur="
								handleAmount(
									queryData,
									2,
									'rebateAmountMin',
									'rebateAmountMax',
									$t(
										'funds.proxy_member_funds_record.form_search_rebateCheck2'
									)
								)
							"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<!-- <el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button> -->
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					highlight-current-row
					:header-cell-style="getRowClass"
					:max-height="tableHeight"
				>
					<el-table-column
						prop="orderNo"
						align="center"
						:label="$t('funds.order_no')"
						width="270"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.orderNo" :copy="copy">
								{{ scope.row.orderNo }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t('funds.fund_audit.rebates_cycle')
							]
						"
						prop="cycleName"
						align="center"
						:label="`${$t('funds.fund_audit.rebates_cycle')}`"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								getRebateCycle(
									scope.row.cycleStatrtDate,
									scope.row.cycleEndDate
								)
							}}
						</template>
					</el-table-column>
					<!-- <el-table-column
							v-if="
								tableColumnData[
									$t(
										'funds.proxy_member_funds_record.top_proxy_name'
									)
								]
							"
							prop="topProxyName"
							align="center"
							:label="
								$t(
									'funds.proxy_member_funds_record.top_proxy_name'
								)
							"
							width="130"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								<Copy
									:title="scope.row.topProxyName"
									:copy="copy"
								>
									{{ scope.row.topProxyName }}
								</Copy>
							</template>
						</el-table-column> -->
					<el-table-column
						v-if="tableColumnData[$t('funds.proxy_name')]"
						prop="proxyName"
						align="center"
						:label="$t('funds.proxy_name')"
						width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy :title="scope.row.proxyName" :copy="copy">
								{{ scope.row.proxyName }}
							</Copy>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('common.belong_merchant')]"
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ merchantFilter(scope.row.merchantId) }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								$t(
									'funds.proxy_member_funds_record.person_rebate_amount'
								)
							]
						"
						prop="rebateAmount"
						align="center"
						:label="
							`${$t(
								'funds.proxy_member_funds_record.person_rebate_amount'
							)}`
						"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.personRebateAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.order_status')]
						"
						prop="orderStatus"
						align="center"
						:label="$t('funds.fund_audit.order_status')"
						:width="getWidth(140, 1.4)"
					>
						<template slot-scope="scope">
							<el-tag
								:type="
									scope.row.orderStatus == 4
										? 'success'
										: 'danger'
								"
							>
								{{
									orderStatusMap[scope.row.orderStatus] || '-'
								}}
							</el-tag>
						</template>
					</el-table-column>

					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.audit_time')]
						"
						align="center"
						:label="$t('funds.fund_audit.audit_time')"
						width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Time || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Time || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.audit_cost')]
						"
						align="center"
						:label="$t('funds.fund_audit.audit_cost')"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									timeTurner(scope.row.audit1Cost) || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									timeTurner(scope.row.audit2Cost) || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[$t('funds.fund_audit.lock_account')]
						"
						align="center"
						:label="$t('funds.fund_audit.lock_account')"
						width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Operator || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result == 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Operator || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[$t('common.actions')]"
						prop="auditStep"
						align="center"
						:label="$t('common.actions')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('408071')"
								type="primary"
								size="medium"
								@click="openDetail(scope.row)"
							>
								{{ $t('common.check') }}
							</el-button>
							<span v-else>-</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					v-show="!!total"
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<detail
			v-if="pageType === 'd'"
			:detail-data="detailData"
			@goBack="goBack"
		></detail>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import MainContent from '@/components/MainContent/index.vue'
const end = () => {
	return dayjs()
		.add(-1, 'day')
		.endOf('day')
		.valueOf()
}
const start = () => {
	return dayjs()
		.add(-1, 'day')
		.startOf('day')
		.valueOf()
}
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.rebateCheckRecord,
	components: { detail: () => import('./components/detail'), MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				inputType: 1,
				rebateAmountMin: undefined,
				rebateAmountMax: undefined
			},
			queryTime: [start(), end()],
			pageType: 'i',
			detailData: {},
			showClear1: false,
			showClear2: false,
			name: '',
			tableData: [],
			selectedData: {
				type: 1,
				userName: ''
			},
			orderStatusArr: [
				{
					code: '4',
					description: this.$t('funds.fund_audit.pass_the_audit')
				},
				{
					description: this.$t('funds.fund_audit.audit_fail_1'),
					code: '1'
				},
				{
					code: '3',
					description: this.$t('funds.fund_audit.audit_fail_2')
				}
			],
			orderStatusMap: {
				1: this.$t('funds.fund_audit.audit_fail_1'),
				3: this.$t('funds.fund_audit.audit_fail_2'),
				4: this.$t('funds.fund_audit.pass_the_audit')
			},
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			activityListField: {
				// 返点周期: true,
				// 代理账号: true,
				// 所属商户: true,
				// 返点金额: true,
				// 订单状态: true,
				// 审核时间: true,
				// 审核用时: true,
				// 审核人: true,
				// 操作: true
				[this.$t('funds.fund_audit.rebates_cycle')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.top_proxy_name'
				)]: true,
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.person_rebate_amount'
				)]: true,
				[this.$t('funds.fund_audit.order_status')]: true,
				[this.$t('funds.fund_audit.audit_time')]: true,
				[this.$t('funds.fund_audit.audit_cost')]: true,
				[this.$t('funds.fund_audit.lock_account')]: true,
				[this.$t('common.actions')]: true
			}
		}
	},
	computed: {},
	created() {
		this.initIndexDB('rebateCheckRecord', this.activityListField)
	},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		forceUpdate(value) {
			this.$forceUpdate()
			this.queryData.inputValue = this.queryData.inputValue.replace(
				/[^A-Za-z0-9]/g,
				''
			)
		},
		hiddenClearIcon(key) {
			setTimeout(() => {
				this[key] = false
			}, 200)
		},
		clearable(key) {
			this.$delete(this.queryData, key)
		},
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(
					/[\u4E00-\u9FA5]/g,
					''
				)
				this[key][key1] = (this[key][key1] + '').replace(
					NO_SPECIAL_CHAR,
					''
				)
			}
		},
		timeTurner(time) {
			var day = Math.floor(time / 86400) // 整数部分代表的是天；一天有24*60*60=86400秒 ；

			time = time % 86400 // 余数代表剩下的秒数；

			var hour = Math.floor(time / 3600) // 整数部分代表小时；

			time %= 3600 // 余数代表 剩下的秒数；

			var minute = Math.floor(time / 60)

			time %= 60

			var str = `${day > 0 ? day + 'd' : ''}${
				hour > 0 || day ? hour + 'h' : ''
			}${minute > 0 || hour ? minute + 'm' : ''}${time}s`
			return str
		},
		getRebateCycle(date1, date2) {
			date1 = date1 && dayjs(String(date1)).format('YYYY-MM-DD')
			date2 = date2 && dayjs(String(date2)).format('YYYY-MM-DD')

			if (date1 === date2) {
				return date1 || '-'
			} else {
				return date1 && date2 ? date1 + ' - ' + date2 : '-'
			}
		},
		filterOrderStatus(code) {
			const item = this.orderStatusArr.find(
				(item) => item.code === String(code)
			)
			return item ? item.description : '-'
		},
		loadData() {
			this.loading = true
			const [startTime, endTime] = this.queryTime || []
			let params = {
				...this.queryData,
				startTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD')
					: undefined,
				endTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === 1) {
				params.proxyName = params.inputValue || undefined
				params.orderNo = undefined
				params.topProxyName = undefined
			} else if (params.inputType === 2) {
				params.orderNo = undefined
				params.proxyName = undefined
				params.topProxyName = params.inputValue || undefined
			} else {
				params.orderNo = params.inputValue || undefined
				params.proxyName = undefined
				params.topProxyName = undefined
			}
			this.$api
				.getProxyRebateSelectAuditRecord(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.tableData = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		openDetail(row) {
			this.allowReview = row.lockAccount === this.name
			this.detailData = row
			this.pageType = 'd'
		},
		goBack() {
			this.pageType = 'i'
			this.loadData()
		},
		reset() {
			this.queryData = {
				inputType: 1,
				rebateAmountMin: undefined,
				rebateAmountMax: undefined
			}
			this.queryTime = [start(), end()]
			this.pageNum = 1
			this.loadData()
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		clickDel() {
			this.dialogColumnData = {}
			this.dialogColumnData = {
				// 返点周期: true,
				// 代理账号: true,
				// 所属商户: true,
				// 返点金额: true,
				// 订单状态: true,
				// 审核时间: true,
				// 审核用时: true,
				// 审核人: true,
				// 操作: true
				[this.$t('funds.fund_audit.rebates_cycle')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.top_proxy_name'
				)]: true,
				[this.$t('funds.proxy_name')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t(
					'funds.proxy_member_funds_record.person_rebate_amount'
				)]: true,
				[this.$t('funds.fund_audit.order_status')]: true,
				[this.$t('funds.fund_audit.audit_time')]: true,
				[this.$t('funds.fund_audit.audit_cost')]: true,
				[this.$t('funds.fund_audit.lock_account')]: true,
				[this.$t('common.actions')]: true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
::v-deep .el-input-group__prepend {
	width: 110px;
}
.el-input-number_container {
	display: inline-block;
	position: relative;
	.close_icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: #ccc;
	}
}
</style>
